<template>
  <view class="page-container">
    <!-- 顶部波浪背景 -->
    <view class="header-bg"></view>

    <view class="content-wrapper">
      <view class="settings-icon" @click="goToSetting()">
        <uni-icons type="gear-filled" size="26" color="#ffffff"></uni-icons>
      </view>

      <!-- 用户信息卡片 -->
      <view class="user-card" @click="goToEditPage">
        <image class="avatar" :src="getResidentUrl(user.imgUrl)" mode="aspectFill"></image>
        <view class="user-info">
          <text class="name">{{ user.name }}</text>
          <text class="details">{{ user.gender }}</text>
        </view>
        <view class="phone-tag">
          <uni-icons type="phone" size="14" color="#fff" style="margin-right: 8rpx;"></uni-icons>
          <text>{{ user.phone }}</text>
        </view>
        <view class="role-switcher" @click="switchRole">
          <text>切换家庭角色</text>
        </view>
      </view>

      <!-- 功能列表 -->
      <view class="menu-list">
        <view class="menu-item" v-for="item in menuItems" :key="item.id" @click="navigateTo(item.url)">
          <view class="item-left">
            <image class="item-icon" :src="item.icon" mode="aspectFit"></image>
            <text class="item-label">{{ item.label }}</text>
          </view>
          <uni-icons type="right" size="16" color="#cccccc"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState} from 'vuex';
import {getResidentUrl} from "../../utils/url";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons},
  computed: {
    ...mapState({
      // 用户信息
        user: state => state.userInfo}
    )
  },
  name: "MyDetail",
  data() {
    return {
      // 菜单项配置
      menuItems: [{
        id: 1,
        label: '签约记录',
        icon: 'https://img.icons8.com/fluency/96/task.png',
        url: '/pages/my/sign-records'
      }, {
        id: 2,
        label: '我的申请记录',
        icon: 'https://img.icons8.com/fluency/96/conference-call.png',
        url: '/pages/my/myApplication'
      }, {
        id: 3,
        label: '我的健康档案',
        icon: 'https://img.icons8.com/fluency/96/document.png',
        url: '/pages/index/healthDetail'
      }, {
        id: 4,
        label: '我的健康监测',
        icon: 'https://img.icons8.com/fluency/96/heart-with-pulse.png',
        url: '/pages/index/healthObserve'
      }, {
        id: 5,
        label: '我的医生团队',
        icon: 'https://img.icons8.com/fluency/96/medical-doctor.png',
        url: '/pages/my/doctor-team'
      }, {
        id: 6,
        label: '我的服务包',
        icon: 'https://img.icons8.com/fluency/96/paid-bill.png',
        url: '/pages/my/service-packages'
      }, ]
    };
  },
  methods: {
    getResidentUrl,
    goToEditPage(){
      uni.navigateTo({
        url: '/pages/my/setting/edit-detail'
      });
    },goToSetting(){
      uni.navigateTo({
        url: '/pages/my/setting/my-setting'
      });
    }
    ,navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    switchRole() {
      // 切换家庭角色的逻辑
      uni.showActionSheet({
        itemList: ['李白 (本人)', '李清照 (妻子)'],
        success: function(res) {
          console.log('选择了：' + res.tapIndex);
        }
      });
    },
  }
}
</script>

<style scoped>
.page-container {
  position: relative;
  background-color: #f5f8ff;
  min-height: 100vh;
  padding-bottom: 40rpx; /* 为按钮增加一些底部空间 */
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 350rpx;
  background: linear-gradient(to bottom, #007aff, #0056b3);
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
}

.content-wrapper {
  position: relative;
  z-index: 10;
  padding: 0 30rpx;
  padding-top: var(--status-bar-height);
}

.settings-icon {
  position: absolute;
  top: var(--status-bar-height);
  right: 30rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
}

.user-card {
  position: relative;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-top: 100rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 86, 179, 0.1);
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-right: 24rpx;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.details {
  font-size: 26rpx;
  color: #888;
  margin-top: 8rpx;
}

.phone-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
}

.role-switcher {
  position: absolute;
  bottom: -20rpx;
  right: 30rpx;
  background: #007aff;
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
}

.menu-list {
  background-color: #ffffff;
  border-radius: 24rpx;
  margin-top: 50rpx;
  padding: 10rpx 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 86, 179, 0.05);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 24rpx;
}

.item-label {
  font-size: 30rpx;
  color: #333;
}

/* 新增：退出按钮容器 */
.logout-btn-container {
  margin-top: 60rpx;
}

.logout-btn::after {
  border: none; /* 移除uni-app按钮的默认边框 */
}

.logout-btn:active {
  background-color: #e54848; /* 点击时的颜色变化 */
}
</style>

